<template>
  <div class="dialog">
    <el-dialog
      title="入库信息"
      :visible.sync="showDialog"
      width="65%"
      top="0"
      :close-on-click-modal="false"
      @close="close"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="入库单号：" prop="inputStorageNo" class="w50p">
          <el-input
            v-model="formData.inputStorageNo"
            placeholder="请输入入库单号"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="入库来源：" prop="source" class="w50p">
          <el-select
            v-model="formData.source"
            style="width: 100%;"
            placeholder="请选择"
            clearable
            @change="sourceChange"
          >
            <el-option
              v-for="item in sourceOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="formData.source == '生产管理系统'"
          label="生产批次："
          prop="batchNo"
          class="w50p"
        >
          <el-select
            v-model="formData.batchNo"
            style="width: 100%;"
            placeholder="请选择"
            clearable
            @change="batchChange"
          >
            <el-option
              v-for="item in batchOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="formData.source == '委托加工入库'"
          label="委托加工单位："
          prop="manufacturingNo"
          class="w50p"
        >
          <el-select
            v-model="formData.manufacturingNo"
            style="width: 100%;"
            clearable
            placeholder="请选择"
            @change="manufacturingChange"
          >
            <el-option
              v-for="item in entrustedOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库类型：" prop="type" class="w50p">
          <el-select
            v-model="formData.type"
            style="width: 100%;"
            placeholder="请选择"
            @change="getMaterialType"
          >
            <el-option
              v-for="item in enterWareTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库货：" prop="materialNo" class="w50p">
          <el-select
            v-model="formData.materialNo"
            style="width: 100%;"
            placeholder="选择入库货"
            clearable
            @change="materialChanege"
          >
            <el-option
              v-for="item in productionOptions[materialType]"
              :key="item.materialNo"
              :label="item.materialName || item.material.materialName"
              :value="item.materialNo"
            />
          </el-select>
        </el-form-item>
        <div style="display: flex;" class="w50p">
          <el-form-item style="width:75%" label="入库量：" prop="quantity">
            <el-input
              v-model="formData.quantity"
              placeholder="请输入入库量"
              clearable
            />
          </el-form-item>
          <el-form-item style="width: 25%;" prop="unitNo">
            <el-select
              v-model="formData.unitNo"
              placeholder="选择单位"
              clearable
              @change="getUnit"
            >
              <el-option
                v-for="item in unitOptions"
                :key="item.unitNo"
                :label="item.unitName"
                :value="item.unitNo"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="入库仓库：" prop="stordocNo" class="w50p">
          <el-select
            v-model="formData.stordocNo"
            style="width: 100%;"
            placeholder="请选择"
            clearable
            @change="stordocChange"
          >
            <el-option
              v-for="item in warehouseOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库人：" prop="personNo" class="w50p">
          <el-select
            v-model="formData.personNo"
            style="width: 100%;"
            placeholder="请选择"
            clearable
            @change="personChange"
          >
            <el-option
              v-for="item in personOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入库日期：" prop="date" class="w50p">
          <el-date-picker
            v-model="formData.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="入库图片：" class="w50p">
          <el-upload
            ref="upload"
            class="upload-file"
            action
            multiple
            :limit="1"
            :on-remove="params => removePicture(params)"
            :http-request="params => addPicture(params)"
            :file-list="pictureList"
            accept=".png, .jpg, .jpeg, .pdf"
          >
            <el-button
              v-if="pictureList.length < 1"
              type="text"
              class="add-many"
            >点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from "@/utils/index";
import QualityManage from "@/api/processing-management/quarity-manage";
export default {
  name: "Addeditdialog",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    inputStorageNo: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""
    },
    sourceOptions: {
      type: Array,
      default: () => []
    },
    enterWareTypeOptions: {
      type: Array,
      default: () => []
    },
    unitOptions: {
      type: Array,
      default: () => []
    },
    batchOptions: {
      type: Array,
      default: () => []
    },
    personOptions: {
      type: Array,
      default: () => []
    },
    entrustedOptions: {
      type: Array,
      default: () => []
    },
    warehouseOptions: {
      type: Array,
      default: () => []
    },
    productionOptions: {
      type: Object,
      default: () => {}
    },
    editData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      materialType: "",
      pictureList: [],
      showDialog: false,
      // 展示
      formData: {
        inputStorageNo: "",
        source: "",
        type: "",
        stordocNo: "",
        materialNo: "",
        quantity: "",
        batchNo: "",
        personNo: "",
        date: "",
        manufacturingNo: ""
      },
      rules: {
        source: [
          {
            required: true,
            message: "请选择入库来源",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择入库类型",
            trigger: "blur"
          }
        ],
        batchNo: [
          {
            required: true,
            message: "请选择生产批次",
            trigger: "change"
          }
        ],
        manufacturingNo: [
          {
            required: true,
            message: "请选择委托加工单位",
            trigger: "blur"
          }
        ],
        stordocNo: [
          {
            required: true,
            message: "请选择入库仓库",
            trigger: "blur"
          }
        ],
        materialNo: [
          {
            required: true,
            message: "请选择入库产品",
            trigger: "blur"
          }
        ],
        quantity: [
          {
            required: true,
            message: "请输入入库量",
            trigger: "blur"
          },
          {
            pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
            message: "值为不小于0的数字",
            trigger: ["blur", "change"]
          }
        ],
        personNo: [
          {
            required: true,
            message: "请选择入库接收人",
            trigger: "blur"
          }
        ],
        unitNo: [
          {
            required: true,
            message: "请选择单位",
            trigger: "blur"
          }
        ],
        date: [
          {
            required: true,
            message: "请选择入库日期",
            trigger: "blur"
          }
        ]
      }
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    type(v) {
      this.materialType = v;
    },
    inputStorageNo(v) {
      this.formData.inputStorageNo = v;
    },
    editData(v) {
      this.formData = deepClone(v);
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 获取入库类型
    getMaterialType(e) {
      let a = "";
      switch (e) {
        case "产品入库":
          a = "product";
          break;
        case "原料入库":
          a = "rawMaterial";
          break;
        case "附属品入库":
          a = "accessories";
          break;
        default:
          "其他";
          a = "others";
          break;
      }
      this.materialType = a;
    },
    getUnit(e) {
      this.unitOptions.forEach(item => {
        if (item.unitNo === e) {
          this.formData.unitName = item.unitName;
        }
      });
    },
    sourceChange() {
      this.formData.batchNo = "";
      this.formData.manufacturingNo = "";
    },
    batchChange(item) {
      let Item = this.batchOptions.find(e => {
        return e.value === item;
      });
      this.formData.batchName = Item.name;
    },
    manufacturingChange(item) {
      let Item = this.entrustedOptions.find(e => {
        return e.value === item;
      });
      this.formData.manufacturingName = Item.name;
    },
    personChange(item) {
      let Item = this.personOptions.find(e => {
        return e.value === item;
      });
      this.formData.personName = Item.name;
    },
    stordocChange(item) {
      let Item = this.warehouseOptions.find(e => {
        return e.value === item;
      });
      this.formData.stordocName = Item.name;
    },
    materialChanege(item) {
      let Item = this.productionOptions[this.materialType].find(e => {
        return e.materialNo === item;
      });
      this.formData.materialName =
        Item.materialName || Item.material.materialName;
      this.$set(this.formData, "unitNo", Item.unitNo || Item.material.unitNo);
    },
    save(formData) {
      this.$refs[formData].validate(async valid => {
        if (valid) {
          if (this.pictureList.length > 0) {
            let form = new FormData();
            console.log(this.pictureList[0]);
            form.append("file", this.pictureList[0]);
            let res = await QualityManage.addPicture(form);
            if (res.code !== 1) {
              this.$message.error("图片保存失败");
              return;
            }
            this.formData.pictureNo = res.data;
          }
          try {
            this.unitOptions(item => {
              if (item.unitNo === this.formData.unitNo) {
                this.formData.unitName = item.unitName;
                throw new Error("End Loop");
              }
            });
          } catch (e) {
            if (e.message === "End Loop") throw e;
          }
          this.unitOptions.forEach(item => {
            if (item.unitNo === this.formData.unitNo) {
              this.formData.unitName = item.unitName;
            }
          });
          this.$emit("addEvent", this.formData);
          this.close();
        }
      });
    },
    close() {
      this.$emit("closeDialog");
      this.resetForm("ruleForm");
      this.pictureList = [];
    },
    cancel() {
      this.close();
    },
    // 重置验证
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removePicture(file) {
      const index = this.pictureList.findIndex(item => {
        return item.uid === file.uid;
      });
      this.pictureList.splice(index, 1);
    },
    addPicture(file) {
      this.pictureList.push(file.file);
    }
  }
};
</script>

  <style lang="scss" scoped>
::v-deep .el-form-item__label {
  min-width: 160px !important;
}
</style>
